<!--
 * @Author: gyc
 * @Date: 2020-05-21 10:07:56
 * @LastEditTime: 2020-08-25 14:43:11
 * @Description: Nuxt测试版
--> 
<template>
<div class="user-info">
    <div class="user-title">个人信息</div>
    <div class="user-info-item">
        用户名:
        <span v-if="!isEdit">别动我结菜</span>
        <input type="text" v-model="nickName" v-if="isEdit" />
    </div>
    <div class="user-info-item">
        性别:
        <span v-if="!isEdit">男</span>
        <RadioGroup v-model="sex" v-if="isEdit" style="margin-left:5px">
            <Radio label="男"></Radio>
            <Radio label="女"></Radio>
        </RadioGroup>
    </div>
    <div class="user-info-item">
        爱好:
        <span v-if="!isEdit">唱跳RAP</span>
        <input type="text" v-model="hobby" v-if="isEdit" />
    </div>
    <div class="user-info-item">
        最爱作品:
        <span v-if="!isEdit">SAO</span>
        <input type="text" v-model="bestStory" v-if="isEdit" />
    </div>
    <div class="user-info-item">
        QQ:
        <span v-if="!isEdit">2717902644</span>
        <input type="text" v-model="QQ" v-if="isEdit" />
    </div>
    <div class="user-info-item user-info-liuyan">
        留言:
        <span v-if="!isEdit">xxxxxxxxxxxxxxxxx</span>
        <i-input v-model="signature" maxlength="100" show-word-limit type="textarea" placeholder="Enter something..." style="width: 200px;margin-left:5px" v-if="isEdit" />
    </div>
    <div class="userinfo-btn">
        <!--    <button @click="updateInfo">保存</button>-->
        <button-sao :type="2" msg="保存" @confirm="updateInfo"></button-sao>
    </div>
</div>
</template>

<script>
import buttonSao from "@/components/button/button_sao";
import {
    Decrypt,
    Encrypt
} from "@/assets/js/utils.js";
export default {
    name: "userInfo",
    props: ["info"],
    data() {
        return {
            sex: !!this.info == true ? this.info.sex : "1",
            signature: !!this.info == true ? this.info.signature : "",
            isEdit: true,
            QQ: !!this.info == true ? this.info.QQ : "",
            nickName: !!this.info == true ? this.info.nickName : "",
            hobby: !!this.info == true ? this.info.hobby : "",
            bestStory: !!this.info == true ? this.info.bestStory : "",
        };
    },
    mounted() {
        console.log(this.info);
    },
    methods: {
        getUrl(e) {
            this.img = e;
            console.log(e);
        },
        uploadImg(response, file, fileList) {
            this.$refs.upload.clearFiles();
            // console.log(file);
            // this.img = file;
        },
        updateInfo() {
            this.$axios
                .get("/api/user/updateInfo", {
                    params: {
                        userid: Decrypt(localStorage.getItem("loginCode")),
                        nickName: this.nickName,
                        sex: this.sex,
                        hobby: this.hobby,
                        bestStory: this.bestStory,
                        QQ: this.QQ,
                        signature: this.signature,
                    },
                })
                .then((res) => {
                    this.$Message.success("更新成功！");
                });
        },
    },
    components: {
        "button-sao": buttonSao,
    },
};
</script>

<style lang="scss" scoped>
input {
    width: 120px;
    outline: none;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #aaa;
    text-align: center;
    margin-left: 5px;

    &:focus {
        border-bottom: 1px solid black;
    }

    &:focus label {
        font-size: 24px;
    }
}

button {
    width: 80px;
    height: 35px;
    outline: none;
    border: 0;
    background-color: $gcolor;
    color: white;
    cursor: pointer;
    transition: all 0.4s ease-in-out;

    &:hover {
        box-shadow: 0px 0px 4px $gcolor;
    }
}

.user-info {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: white;
    align-items: center;
    padding-bottom: 15px;
    box-shadow: 0px 0px 20px #eee;
    overflow: auto;

    .info-title {
        display: flex;
        width: 100%;
        height: 60px;
        margin-top: 5px;
        margin-bottom: 5px;

        .info-title-item {
            position: relative;
            display: flex;
            width: 33.33334%;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;

            span {
                position: relative;

                &:nth-of-type(1) {
                    font-weight: bold;
                    letter-spacing: 2px;
                }
            }
        }

        // border: 1px solid #ccc;
    }

    .user-info-edit {
        position: absolute;
        right: 10px;
        top: 11.5px;
        border: 1px solid black;
        padding-left: 5px;
        padding-right: 5px;
        cursor: pointer;
        color: #000;
    }

    .user-title {
        display: flex;
        position: relative;
        width: 100%;
        padding-left: 20px;
        justify-content: flex-start;
        height: 45px;
        align-items: center;
        font-size: 18px;

        // border-bottom: 1px solid #eee;
        &::before {
            position: absolute;
            content: "";
            width: 4px;
            height: 18px;
            background-color: $gcolor;
            left: 10px;
            top: 12.4px;
            border-radius: 2px;
        }
    }

    .user-info-img {
        width: 120px;
        height: 120px;
    }

    .user-info-btn {
        width: 120px;
        height: 35px;
        margin-top: 20px;
    }

    .user-info-item {
        display: flex;
        align-items: center;
        min-height: 32px;
        margin-top: 20px;
        // justify-content: space-between;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        letter-spacing: 2px;
    }

    .user-info-liuyan {
        display: flex;
        align-items: flex-start;
        margin-top: 6px;
        margin-top: 20px;
    }

    .userinfo-btn {
        display: flex;
        width: 100%;
        height: auto;
        padding-top: 20px;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        // border-top: 1px solid #eee;
    }
}
</style>
